import { defineComponent, PropType, provide } from 'vue';
import { SchemaFormContextKey } from './context';
import SchemaItem from './SchemaItem';
import { Schema } from './types';

// 接受一个schema json字符串，转换成form表单
// 我们首先应该关心的就是 schema 的 type 通过 type 确定要渲染什么类型的组件
export default defineComponent({
  name: 'SchemaForm',
  props: {
    schema: {
      type: Object as PropType<Schema>,
      required: true,
    },
    value: {
      required: true,
    },
    onChange: {
      type: Function as PropType<(v: any) => void>,
      required: true,
    },
  },
  setup(props) {
    const handleChange = (v: any) => {
      props.onChange(v);
    };
    const context = {
      SchemaItem,
    };
    provide(SchemaFormContextKey, context);

    // 将不同类型的 type item 分发到 schemaItem 里面去
    return () => {
      // props 里面的 schema 变了的时候需要重新渲染整个组件， 所以 schema 的取值要写在 render函数里
      const { schema, value } = props;
      return (
        <SchemaItem
          schema={schema}
          rootSchema={schema}
          value={value}
          onChange={handleChange}
        />
      );
    };
  },
});
